<template>
	<u-keyboard
		default=""
		mode="number"
		v-model="show"
		ref="uKeyboard"
		:mask="true"
		:tooltip="false"
		:dot-enabled="false"
		:safe-area-inset-bottom="true"
		@change="onChange"
		@backspace="onBackspace"
	>
		<view>
			<view class="u-text-center u-padding-20 money">
				<text class="u-font-30 u-padding-left-10">￥</text>
				<text>{{ vk.pubfn.priceFilter(money) }}</text>
				<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
					<u-icon name="close" color="#333333" size="28"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-center">
				<u-message-input
					v-model="password"
					mode="box"
					:maxlength="6"
					:dot-fill="true"
					:disabled-keyboard="true"
				></u-message-input>
			</view>
			<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">
				支付键盘
			</view>
		</view>
	</u-keyboard>
</template>

<script>
export default {
	props: {
		money: Number
	},
	data() {
		return {
			show: false,
			password: ""
		}
	},
	methods: {
		onChange(val) {
			console.log(val)
			if (this.password.length < 6) {
				this.password += val
			}
			if (this.password.length >= 6) {
				this.pay()
			}
		},
		onBackspace() {
			if (this.password.length > 0) {
				this.password = this.password.substring(0, this.password.length - 1)
			}
		},
		pay() {
			this.show = false
			this.$emit("finish", this.password)
		},
		showPop(flag = true) {
			this.password = ""
			this.show = flag
		}
	}
}
</script>

<style lang="scss">
.money {
	font-size: 62rpx;
	color: $u-type-warning;
	position: relative;

	.close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		line-height: 28rpx;
		font-size: 28rpx;
	}
}

.tips {
	color: $u-tips-color;
}
</style>
